import { Component } from 'react'
import { View, Text, Image, ScrollView, Input } from '@tarojs/components'
import './index.scss'
// import AtInput from "./AtInput"
import Base64 from '../../../../utils/base64'

import Taro from '@tarojs/taro'
//公共组件
import LgInput from '../../input'
import { API_GetQRcode } from '../../../../network/servers'
import getInfo from '../../../../pages/utils/getInfo'
import MyUtils from '../utils'

interface PrPopQRcodeProps {
  isOpen: boolean
  // title?:string
  placeholder?: string
  confirm?(value: string): void
  cancel?(): void

  onClickBtnLeft?(base64): void
  onClickBtnRight?: (base64) => void

  textBtnLeft: string
  textBtnRight: string

  data: any
}

interface IndexState {
  value: string
  qrCodeBase64?: string
}

export default class PrPopQRcode extends Component<PrPopQRcodeProps, IndexState>{
  constructor(props) {
    super(props)
    this.state = {
      value: ""
    }
    this.onClickBtnLeft = this.onClickBtnLeft.bind(this)
    this.onClickBtnRight = this.onClickBtnRight.bind(this)
    this.onInputChange = this.onInputChange.bind(this)
    this.cancel = this.cancel.bind(this)
  }

  // componentWillMount() { }

  // componentDidMount() { }

  UNSAFE_componentWillReceiveProps(nextProps: PrPopQRcodeProps) {
    if (this.props.isOpen == false && nextProps.isOpen == true) {//打开弹窗
      this.getQrCode()
    }
    if (this.props.isOpen == true && nextProps.isOpen == false) {
      this.setState({
        qrCodeBase64: undefined
      })
    }
  }
  async getQrCode() {
    let data = this.props.data
    let systemInfo = MyUtils.getStorage("systemInfo");
    let U10System = MyUtils.getStorage("U10System");
    let webSvrAddr = U10System.webSvrAddr;

    let res = systemInfo.itemUrl + data.filePath;
    console.log("ewm", res)
    let base64 = new Base64();
    let url = encodeURIComponent(base64.encode(res));
    let eduId = getInfo.getSchoolId();
    let filePath = `${webSvrAddr}onlinePreview?url=${url}&eduId=${eduId}`

    let qrCodeBase64 = await this.api_getQRcode(filePath, '')

    this.setState({
      qrCodeBase64: qrCodeBase64
    })
  }


  /**
   * 生成二维码图片
   * @param fileUrl 文件地址字符串
   */
  api_getQRcode(fileUrl, logoUrl) {
    return new Promise<any>((resolve) => {
      let params = {
        url: fileUrl,
        logoUrl
      }
      let header = {
        "content-type": "text/plain",
        "Authorization": getInfo.getToken(),
      }
      API_GetQRcode(params, header).then(res => {
        if (res.code == 200) {
          console.log("api-生成二维码", res)
          resolve(res.data)
        } else {
          Taro.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
          console.log("[x]生成二维码失败")
        }
      })
    })
  }

  onClickBtnLeft() {
    // console.log("左按钮")
    this.props.onClickBtnLeft ? this.props.onClickBtnLeft(this.state.qrCodeBase64) : ""
  }
  onClickBtnRight() {
    // console.log("右按钮");
    this.props.onClickBtnRight ? this.props.onClickBtnRight(this.state.qrCodeBase64) : ""
  }
  cancel() {//取消
    // console.log("取消")
    this.props.cancel ? this.props.cancel() : ""
  }
  onInputChange(e) {
    this.setState({
      value: e.detail.value
    })
  }

  render() {
    let isOpen = this.props.isOpen
    let value = this.state.value
    // let title = this.props.title || ""
    let placeholder = this.props.placeholder || "请输入名称（20字以内）"
    return (
      <View className='PrPopQRcode'>
        <View className='PrPopQRcode_layerOut'
          style={{ display: isOpen ? "block" : "none", zIndex: isOpen ? 99 : -1 }}>
          <View className='PrPopQRcode_mask' onClick={this.cancel}></View>

          <View className='PrPopQRcode_centerCard'
            style={{ zIndex: isOpen ? 100 : -1 }}>

            <View className='PrPopQRcode_centerCard_cont'>
              <View className='PrPopQRcode_title'>{this.props.data?.fileFolderName + '.' + this.props.data?.fileSuffix}</View>
              <View
                className='PrPopQRcode_image_box'
                onClick={() => {
                  MyUtils.previewPic(this.state.qrCodeBase64)
                }}>
                {
                  this.state.qrCodeBase64 ? <Image mode='aspectFit' className='PrPopQRcode_image' src={this.state.qrCodeBase64}></Image> : ""
                }
              </View>
              {/* <View className='share-download'>
                <View className='share-download-left'>
                  下载到本地
                </View>
                <View className='share-download-right'>分享链接</View>
              </View> */}
            </View>
            {
              // process.env.TARO_ENV === "h5" ? "" :
                // process.env.TARO_ENV === "weapp" ?
                  <>
                    <View className='btn_space'></View>
                    <View className='PrPopQRcode_centerCard_btn'>
                      <View className='btn_left' onClick={this.onClickBtnLeft}>
                        {this.props.textBtnLeft}
                      </View>
                      <View className='btn_right' onClick={this.onClickBtnRight}>
                        {this.props.textBtnRight}
                      </View>
                    </View>
                  </>
                  // : ""
            }
          </View>
        </View>
      </View>
    )
  }
}
